import "./timer.less";
import React, { Component}   from 'react';
import config from '../config.json';
import Taro from '@tarojs/taro';

type calendarMainState = {
    currentDay: string,
    currentMonth: string,
    currentYear: string,
    weekList: [
        { name: '一', className: '' },
        { name: '二', className: '' },
        { name: '三', className: '' },
        { name: '四', className: '' },
        { name: '五', className: '' },
        { name: '六', className: '' },
        { name: '日', className: '' }
    ],
    dayList: {
        date: string,
        day: string,
        className: string,
    }[],
    dateTimeLists: object,
}
export default class CalendarMain extends Component<any, calendarMainState> {
    constructor(props) {
        super(props);
        this.state = {
            currentDay: '',
            currentMonth: '',
            currentYear: '',
            weekList: [
                { name: '一', className: '' },
                { name: '二', className: '' },
                { name: '三', className: '' },
                { name: '四', className: '' },
                { name: '五', className: '' },
                { name: '六', className: '' },
                { name: '日', className: '' }
            ],
            dayList: [],
            dateTimeLists: {},
        }

        this.initCalendar = this.initCalendar.bind(this);
        this.renderHeader = this.renderHeader.bind(this);
        this.renderBody = this.renderBody.bind(this);
        this.preMonth = this.preMonth.bind(this);
        this.nextMonth = this.nextMonth.bind(this);
        this.initDate = this.initDate.bind(this);
    }

    componentWillMount() {
        
    }

    componentWillUnmount() {
        
    }

    componentDidMount() {
        this.initDate();
    }
    async initDate() {
        
        console.log("happy1");
        let _this = this;
        await Taro.request({
            url: config.domainName + "/meetroom/query-times",
            method: "GET",
            data: { mid: this.props.id },
            header: {
                token: Taro.getStorageSync('token'),
            },
            success: function(res){
                _this.setState({
                    dateTimeLists: res.data.data,
                });
            }
        });
        this.initCalendar(0);
    }
    // 初始化日历
    initCalendar(currentDate: any) {
        let nowDate = currentDate ? currentDate : new Date();
        let nowMonthFirstDate = this.getMonthFirstDate(nowDate) // 获取当月1号日期
        let nowWeek = new Date(nowMonthFirstDate).getDay() ? new Date(nowMonthFirstDate).getDay() : 7; // 获取星期
        let newDateList = []; // 创建日期数组
        let startDay = 2 - nowWeek; // 开始日期的下标  因为 setDate(0)是上个月最后一天  所以是2-nowWeek
        let showDayLength = nowWeek < 6 ? 35 : 42;  // 如果5行能显示下一个月 就只显示5行
        // 循环处理 获取日历上应该显示的日期
        for (let i = startDay; i < startDay + showDayLength; i++) {
            let date = new Date(new Date(nowMonthFirstDate).setDate(i)); // 获取时间对象
            let day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate().toString()// 小于9的数字前面加0
            let dayObject = {
                date: this.getDateString(date),
                day,
                className: '',
            };
            
            // new Date(str).toDateString() === new Date().toDateString()
            if (date.toDateString() === new Date().toDateString()) {
                dayObject.className = 'today'
            } else if (date.getMonth() === (nowDate.getMonth() - 1) || date.getMonth() === (nowDate.getMonth() + 1)) {
                dayObject.className = 'transparent'
            } else if (date.getFullYear() === (nowDate.getFullYear() - 1) || date.getFullYear() === (nowDate.getFullYear() + 1)) {
                dayObject.className = 'transparent'
            }
            console.log(this.state.dateTimeLists)
            for(let i in this.state.dateTimeLists){
                console.log('in')
                if(i === dayObject.date){
                    console.log('occupy')
                    dayObject.className += ' '+'occupy';
                }
            }

            newDateList.push(dayObject)
        }

        this.setState(
            {
                dayList: newDateList,
                currentDay: nowDate.getDate(),
                currentMonth: nowDate.getMonth() + 1 >= 10 ? nowDate.getMonth() + 1 : '0' + (nowDate.getMonth() + 1),
                currentYear: nowDate.getFullYear(),
            }
        )

    }
    

    // 获取当前date的当月第一天的字符串形式
    getMonthFirstDate(date) {
        let nowYear = date.getFullYear(); // 获取年份
        let nowMonth = date.getMonth() + 1; // 获取月份
        return `${nowYear}-${nowMonth}-01`
    }

    // 获取当前date的字符串形式
    getDateString(date) {
        let nowYear = date.getFullYear(); // 获取年份
        let nowMonth = date.getMonth() + 1; // 获取月份
        let day = date.getDate();
        day = day < 10 ? '0' + day : day;
        return `${nowYear}-${nowMonth}-${day}`
    }

    // 上个月
    preMonth() {
        let date = new Date(`${this.state.currentYear}-${this.state.currentMonth}-${this.state.currentDay}`)
        let preMonthFirstDate = new Date(this.getMonthFirstDate(new Date(date.setDate(0)))); // 0 是上个月最后一天
        this.initCalendar(preMonthFirstDate)
    }

    // 下个月
    nextMonth() {
        let date = new Date(`${this.state.currentYear}-${this.state.currentMonth}-${this.state.currentDay}`)
        let nextMonthFirstDate = new Date(this.getMonthFirstDate(new Date(date.setDate(32))));
        this.initCalendar(nextMonthFirstDate)
    }




    renderHeader() {
        return (
            <div className='calendar-header'>
                <div className='calendar-header-left'>
                    <button onClick={this.preMonth}>上个月</button>
                </div>
                <div className=''>
                    {this.state.currentYear}年{this.state.currentMonth}月
                </div>
                <div className='calendar-header-right'>
                    <button onClick={this.nextMonth}>下个月</button>
                </div>
            </div>
        )
    }

    renderBody() {
        
        return (
            <div className='calendar-body'>
                <div className='week-container'>
                    {this.state.weekList.map(week => {
                        return <div key={week.name} className={`week ${week.className}`}>{week.name}</div>
                    })}
                </div>
                <div className='day-container'>
                    {this.state.dayList.map((dayObject, index) => {
                        return <div key={index} className={`day ${dayObject.className}`}>{dayObject.day}</div>
                    })}
                </div>
            </div>
        )
    }

    render() {
        
        return (
            <div className='calendar'>
                {this.renderHeader()}
                {this.renderBody()}
            </div>
        )
    }
}
